<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仪表盘 - I投E行</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="favicon.ico" rel="icon">
    <link rel="stylesheet" href="css/dashboard.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <h1>I投E行</h1>
                <span>投资行为诊断与纠正平台</span>
            </div>
            <div class="nav-menu">
                <a href="dashboard.html" class="nav-link active">仪表盘</a>
                <a href="#behavior" class="nav-link">行为分析</a>
                <a href="#transactions" class="nav-link">交易记录</a>
                <a href="#simulation" class="nav-link">模拟交易</a>
                <div class="nav-user">
                    <span>欢迎, <span id="userName">用户</span></span>
                    <button id="logoutBtn" class="btn btn-outline btn-small">退出</button>
                </div>
            </div>
        </div>
    </nav>

    <main class="dashboard">
        <div class="dashboard-container">
            <!-- 欢迎区域 -->
            <section class="welcome-section">
                <div class="welcome-card">
                    <h2>欢迎回来!</h2>
                    <p>您最近的投资行为分析已完成，请查看以下洞察和建议。</p>
                </div>
            </section>

            <!-- 行为偏差分析 -->
            <section id="behavior" class="behavior-section">
                <h2 class="section-title">行为偏差分析</h2>
                <div class="behavior-grid">
                    <div class="behavior-card">
                        <h3>偏差雷达图</h3>
                        <div class="radar-container">
                            <canvas id="biasRadar"></canvas>
                        </div>
                    </div>
                    <div class="behavior-card">
                        <h3>行为标签</h3>
                        <div id="behaviorTags" class="tags-container">
                            <!-- 行为标签将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
            </section>

            <!-- 洞察与建议 -->
            <section class="insights-section">
                <h2 class="section-title">个性化洞察与建议</h2>
                <div id="insights" class="insights-container">
                    <!-- 洞察内容将通过JavaScript动态生成 -->
                </div>
            </section>

            <!-- 交易历史 -->
            <section id="transactions" class="transactions-section">
                <div class="section-header">
                    <h2 class="section-title">最近交易记录</h2>
                    <button id="viewAllTransactions" class="btn btn-outline">查看全部</button>
                </div>
                <div id="transactionHistory" class="transactions-container">
                    <!-- 交易记录将通过JavaScript动态生成 -->
                </div>
            </section>

            <!-- 快速操作 -->
            <section class="actions-section">
                <h2 class="section-title">快速操作</h2>
                <div class="actions-grid">
                    <button id="simulateTrade" class="action-card">
                        <div class="action-icon">🔄</div>
                        <h3>模拟交易</h3>
                        <p>在安全环境中练习投资决策</p>
                    </button>
                    <button id="generateReport" class="action-card">
                        <div class="action-icon">📊</div>
                        <h3>生成报告</h3>
                        <p>创建行为分析PDF报告</p>
                    </button>
                    <button id="viewResources" class="action-card">
                        <div class="action-icon">📚</div>
                        <h3>学习资源</h3>
                        <p>获取个性化投资教育内容</p>
                    </button>
                    <button id="compareBenchmark" class="action-card">
                        <div class="action-icon">📈</div>
                        <h3>基准对比</h3>
                        <p>与同类投资者比较行为数据</p>
                    </button>
                </div>
            </section>
        </div>
    </main>

    <!-- 导入JavaScript模块 -->
    <script src="js/main.js"></script>
    <script src="js/auth.js"></script>
    <script src="js/behaviorAnalyzer.js"></script>
    <script src="js/dashboard.js"></script>
</body>
</html>